import React, {Component} from 'react';
import ddLogin from '../utils/ddLogin';
import '../assets/stylus/login.styl';
import loginLogo from '../assets/img/logo_ywxt.svg';
import {currentCirle, Circle} from '../showText';


class Login extends Component{
    constructor (props) {
        super(props);
        this.props = props;
    }

    componentDidMount () {
        this.appid = process.env.doingType === 'buildPro' ? 'dingoazuo5qvl71g8x5p1q' : 'dingoa3delr2571zpjcvai';
        // https://oms-console.starcharge.com/login.do 外网
        // http://lijiang.test.ccchong.com:8081/login.do 内网
        this.REDIRECT_URL = process.env.doingType === 'buildPro' ? 'https://oms-console.starcharge.com/login.do' : 'http://oms.k8s.star-charge.com/login.do';
        const gotoUrl = encodeURIComponent(`https://oapi.dingtalk.com/connect/qrconnect?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${this.REDIRECT_URL}`);
        ddLogin.init({
            id: 'login_container', // 这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
            goto: gotoUrl,
            style: 'border:none;background-color:transparent;',
            width : '365',
            height: '300'
        });
        this.init();
    }

    init () {
        if (typeof window.addEventListener !== 'undefined') {
            window.addEventListener('message', this.hanndleMessage, false);
        } else if (typeof window.attachEvent !== 'undefined') {
            window.attachEvent('onmessage', this.hanndleMessage);
        }
        window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

        let canvas = document.getElementById('canvas');
        let ctx = canvas.getContext('2d');
        let w = canvas.width = canvas.offsetWidth;
        let h = canvas.height = canvas.offsetHeight;
        let circles = [];
        let current_circle = new currentCirle(0, 0)

        let draw = function () {
            ctx.clearRect(0, 0, w, h);
            for (let i = 0; i < circles.length; i++) {
                circles[i].move(w, h);
                circles[i].drawCircle(ctx);
                for (let j = i + 1; j < circles.length; j++) {
                    circles[i].drawLine(ctx, circles[j])
                }
            }
            if (current_circle.x) {
                current_circle.drawCircle(ctx);
                for (var k = 1; k < circles.length; k++) {
                    current_circle.drawLine(ctx, circles[k])
                }
            }
            requestAnimationFrame(draw)
        }

        let init = function (num) {
            for (var i = 0; i < num; i++) {
                circles.push(new Circle(Math.random() * w, Math.random() * h));
            }
            draw();
        }
        window.addEventListener('load', init(100));
        window.onmousemove = function (e) {
            e = e || window.event;
            current_circle.x = e.clientX;
            current_circle.y = e.clientY;
        }
        window.onmouseout = function () {
            current_circle.x = null;
            current_circle.y = null;

        };
    }

    hanndleMessage (event) {
        var origin = event.origin;
        console.log("origin", event.origin);
        if( origin === "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
            const loginTmpCode = event.data; //拿到loginTmpCode后就可以在这里构造跳转链接进行跳转了
            window.location.href = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${this.appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=REDIRECT_URI&loginTmpCode=${loginTmpCode}`;
        }
    }

    render () {
        const LoginDom = (
            <div className="loginWrap">
                <div className="login-box">
                    <div className="login-title">
                        <img src={loginLogo} className="App-logo" alt="logo" />
                    </div>
                    <div id="login_container">
                    </div>
                    <div className="bg"></div>
                </div>
                <canvas className="login-bg" id="canvas"></canvas>
            </div>
        );
        return LoginDom;
    }
}

export default Login;